<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html >
<head>
  <link href="style.css" rel="stylesheet" type="text/css" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>欢迎</title>
  <link rel="stylesheet" type="text/css" href="input/css/normalize.css" />
  <link rel="stylesheet" type="text/css" href="input/fonts/font-awesome-4.2.0/css/font-awesome.min.css" />
  <link rel="stylesheet" type="text/css" href="input/css/demo.css" />
  <link rel="stylesheet" type="text/css" href="input/css/component.css" />
  <style>
    .tl {  position: absolute;
      text-align:center;
      top:260px;
      margin-left:190px;  }
  </style>
</head>
<body>
<div id="base">
  <h1 class="tl" >LOG IN</h1>
  <form id="myform"   action="log_suc.jsp" method="post">
    <div id="inputs">
        <p id="nameBox"></p>
       <span class="input input--hoshi">
					<input class="input__field input__field--hoshi" type="text" id="input-4"  name="username" required="required"/>
					<label class="input__label input__label--hoshi input__label--hoshi-color-1" for="input-4">
						<span class="input__label-content input__label-content--hoshi">用户名</span>
					</label>
				</span>
        <p id="pawBox"></p>
      <span class="input input--hoshi">
					<input class="input__field input__field--hoshi" type="password" id="input-5" name="password" required="required"/>
					<label class="input__label input__label--hoshi input__label--hoshi-color-2" for="input-5">
						<span class="input__label-content input__label-content--hoshi">密码</span>
					</label>
				</span>
        <div style="width: 150px;float:left;display:inline;">
        <span class="input input--hoshi">
					<input class="input__field input__field--hoshi" type="text" name="checkcode" required="required"/>
					<label class="input__label input__label--hoshi input__label--hoshi-color-2" for="input-5">
						<span class="input__label-content input__label-content--hoshi">验证码</span>
					</label>
				</span>
        </div>
        <div style="width: auto;float: left;margin-top: 40px">
        <img id="codeImg" src="${pageContext.request.contextPath}/action/CheckCode" onclick="refreshCode()">
        </div>
    </div>
      <input type="hidden" name="actionName" value="Log_check">
      <input type="button" class="button blue bigrounded" style="margin-top:500px;margin-left: 100px" onclick="check()" value="提交"/>
      <input type="button" class="button blue bigrounded" style="margin-top:500px;margin-left:100px" onclick="location='join.jsp'" value="注册" />
  </form>
</div>
<div>
    <p id="underBox"></p>
</div>


<script src="input/js/classie.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.js"></script>
<script type="text/javascript">
    function refreshCode() {
        var codeImg = document.getElementById("codeImg");
        var d = new Date();
        codeImg.src = "/dao/CheckCode?s="+d;
    }
</script>

<script>
    $("#input-4").click(function () {
        $("#nameBox").text("");
    });
    $("#input-5").click(function () {
        $("#pawBox").text("");
    });
    function check() {
        var username = $("#input-4").val();
        var password = $("#input-5").val();
        if (username !== null && username.length > 2) {
            if (password !== null && password.length > 4) {
                $.ajax({
                    url: "/JServlet",
                    type: "POST",
                    dataType:"text",
                    contentType: "application/x-www-form-urlencoded; charset=utf-8",
                    data: $("#myform").serialize(),
                    success:function (data,status) {
                        //alert(data+"数据发送状态："+status);
                        if(data.search("log_suc")!==-1){
                            console.log("跳转");
                            document.getElementById('myform').submit();
                        }else {
                            alert("数据发送状态："+status+"\n"+data);
                        }
                    }
                });
            } else {
                $("#pawBox").text("密码不得少于5位");
            }
        } else {
            $("#nameBox").text("用户名不得少于3位");
        }
    }
</script>
<script>
    (function() {
        if (String.prototype.trim) {
        } else {
            (function () {
                var rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;
                String.prototype.trim = function () {
                    return this.replace(rtrim, '');
                };
            })();
        }
        [].slice.call( document.querySelectorAll( 'input.input__field' ) ).forEach( function( inputEl ) {
            if( inputEl.value.trim() !== '' ) {
                classie.add( inputEl.parentNode, 'input--filled' );
            }
            inputEl.addEventListener( 'focus', onInputFocus );
            inputEl.addEventListener( 'blur', onInputBlur );
        } );
        function onInputFocus( ev ) {
            classie.add( ev.target.parentNode, 'input--filled' );
        }
        function onInputBlur( ev ) {
            if( ev.target.value.trim() === '' ) {
                classie.remove( ev.target.parentNode, 'input--filled' );
            }
        }
    })();
</script>
</body>
</html>
